<template>
	<view class="search-wrap" @click="onClick">
		<image src="../../static/icon_home_search@2x.png"></image>
		<input :disabled="disabled" :focus="showSync" :placeholder="placeholder" :maxlength="maxlength" @confirm="confirm" confirm-type="search" type="text" v-model="searchVal" />
	</view>
</template>

<script>
export default {
	name: 'USearch',
	props: {
		disabled: {
			type: Boolean,
			default: false
		},
		placeholder: {
			type: String,
			default: '请输入搜索药品名称'
		},
		maxlength: {
			type: [Number, String],
			default: 100
		},
		keyword: {
			type: String,
			default: ''
		},
		showSync: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			// showSync: false,
			searchVal: ''
		};
	},
	watch: {
		searchVal() {
			this.$emit('input', {
				value: this.searchVal
			});
		},
		keyword: {
			handler(val) {
				// console.log(val);
				this.keyword = val;
				// console.log(this.keyword)
				this.searchVal = this.$props.keyword;
			},
			immediate: true
		}
	},
	methods: {
		searchClick() {
			this.searchVal = '';
			this.$nextTick(() => {
				this.showSync = true;
			});
		},
		clear() {
			this.searchVal = '';
		},
		cancel() {
			this.$emit('cancel', {
				value: this.searchVal
			});
			this.searchVal = '';
			this.showSync = false;
		},
		confirm() {
			this.$emit('confirm', {
				value: this.searchVal
			});
		},
		onClick() {
			this.$emit('click');
		}
	}
};
</script>

<style lang="scss" scoped>
.search-wrap {
	box-sizing: border-box;
	padding-left: 22rpx;
	padding-right: 22rpx;
	margin-bottom: 8rpx;
	width: 100%;
	max-width: 690rpx;
	height: 72rpx;
	background: #f1f1f1;
	border-radius: 6rpx;
	display: flex;
	align-items: center;
	> image {
		width: 24rpx;
		height: 24rpx;
		margin-right: 12rpx;
	}
	> input {
		width: 100%;
		font-size: 24rpx;
	}
}
</style>
